<template>
  <div class="paramHistoryV4Table">
    <div class="paramHistoryV4Table_bg">
      <el-carousel :autoplay="false" arrow="always" indicator-position="none" class="paramHistoryV4Table_tableCarousel" :height="height + 'px'">
        <el-carousel-item v-for="index in Math.ceil(paramList.length / 12)" :key="'carousel' + index">
          <div class="paramHistoryV4Table_tableBg">
            <div class="paramHistoryV4Table_title">
              <div class="paramHistoryV4Table_colTimeItem titleFont">
                <span>时间</span>
              </div>
              <div :class="paramList[(index - 1) * 12 + valIndex - 1].type == '1' ? 'paramHistoryV4Table_colDataItem otherTitleFont': 'paramHistoryV4Table_colDataItem titleFont'" v-for="valIndex in ((index < Math.ceil(paramList.length / 12) || parseInt(paramList.length % 12) === 0) ? 12 : parseInt(paramList.length % 12))" :key="index + 'title' + valIndex">
                <!-- <div class="paramHistoryV4Table_colColorItem" :style="'background-color:' + color[valIndex - 1].color"></div> -->
                <span>{{paramList[(index - 1) * 12 + valIndex - 1].title}}</span>
              </div>
            </div>
            <div class="paramHistoryV4Table_table">
              <div class="paramHistoryV4Table_dataRow" v-for="(item,paIndex) in dataList" :key="item.colTime + paIndex">
                <div class="paramHistoryV4Table_colTimeItem paramFont" :style="item.timeStatus == '2' ? 'color: #FF7044' : 'color: #CCF2FF'">{{item.colTime}}</div>
                <div class="paramHistoryV4Table_colDataItem paramFont" :style="item[paramList[(index - 1) * 12 + valIndex - 1].id] && item[paramList[(index - 1) * 12 + valIndex - 1].id].status == '2' ? 'color: #FF7044' : 'color: #ccf2ff'" v-for="valIndex in ((index < Math.ceil(paramList.length / 12) || parseInt(paramList.length % 12) === 0) ? 12 : parseInt(paramList.length % 12))" :key="item.colTime + valIndex">
                  {{item[paramList[(index - 1) * 12 + valIndex - 1].id] && item[paramList[(index - 1) * 12 + valIndex - 1].id].value ? parseFloat(item[paramList[(index - 1) * 12 + valIndex - 1].id].value).toFixed(item[paramList[(index - 1) * 12 + valIndex - 1].id].reserved) : ''}}
                </div>
                <div v-if="item.hasLine" class="paramHistoryDayLine"></div>
              </div>
              <div class="paramHistoryV4Table_dataRowShowMore" v-if="dataList.length < paramDataList.length" @click="doShowMore()">加载更多</div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
import deepClone from '../utils/deepClone'
import utils from '../utils/utils'
export default {
  name: 'paramHistoryV4Table',
  props: {
    paramDataList: {
      type: Array,
      default: () => {
        return []
      }
    },
    paramList: {
      type: Array,
      default: () => {
        return []
      }
    },
    height: {
      type: Number,
      default: 0
    },
    dataNum: {
      type: Number,
      default: 0
    },
  },
  data () {
    return {
      dataList: [],
      page: 1
    }
  },
  mounted() {
    this.page = 1
    this.dataFormat()
  },
  methods: {
    dataFormat(reflash) {
      let checkDate = ''
      if(reflash || this.page === 1) {
        this.page = 1
        this.dataList = []
      }
      // this.dataList = deepClone(this.paramDataList)
      let length = 30
      if(this.dataList.length < this.paramDataList.length) {
        if(this.paramDataList.length - this.dataList.length < 30) {
          length = this.paramDataList.length - this.dataList.length
        }
      }else {
        length = 0
      }
      for(let i = (this.page - 1) * 30; i < length + (this.page - 1) * 30; i++) {
        let timeStatus = '1'
        for(let key in this.paramDataList[i]) {
          if(key !== 'colTime') {
            if(this.paramDataList[i][key].status === '2') {
              timeStatus = '2'
              break
            }
          }
        }
        let dataItem = this.paramDataList[i]
        dataItem.timeStatus = timeStatus
        let date = utils.getStrByUnderlineBefore(dataItem.colTime, ' ')
        if(checkDate == '') {
          checkDate = date
          dataItem.hasLine = false
        }else if(checkDate !== date) {
          checkDate = date
          dataItem.hasLine = true
        }else {
          dataItem.hasLine = false
        }
        this.dataList.push(dataItem)
      }
      // let showData = deepClone(this.dataList)
      // this.dataList = []
      // this.dataList = deepClone(showData)
    },
    doShowMore() {
      this.page++
      this.dataFormat()
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.paramHistoryV4Table {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  float: left;
}
.paramHistoryV4Table_bg {
  width: 100%;
  height: 100%;
  float: left;
}
.paramHistoryV4Table_tableCarousel .el-carousel__arrow {
  background-color: rgba(46,70,130,0.3)!important;
}
.paramHistoryV4Table_tableCarousel .el-carousel__arrow:hover {
  background-color: rgba(46,70,130,0.5)!important;
}
.paramHistoryV4Table_tableBg {
  width: 100%;
  float: left;
  height: 100%;
}
.paramHistoryV4Table_title {
  width: 100%;
  height: 40px;
  float: left;
  box-sizing: border-box;
  padding-right: 20px;
  background: rgba(25, 19, 53, 0.9);
}
.paramHistoryV4Table_table {
  width: 100%;
  height: calc(100% - 40px);
  /* border-top: 2px solid #AEE5F6;
  border-bottom: 2px solid #AEE5F6; */
  overflow-y: scroll;
  float: left;
  box-sizing: border-box;
  padding-right: 20px;
}
.paramHistoryV4Table_table::-webkit-scrollbar{
  width: 5px;
  height: 5px;
  background: #020E3D;
}
.paramHistoryV4Table_table::-webkit-scrollbar-thumb {
  border-radius: 3px;
  height: 100px;
  background-color: #0095ff;
}

.paramHistoryV4Table_dataRow {
  width: 100%;
  height: 52px;
  float: left;
  border-bottom: 1px solid #2A2642;
}
.paramHistoryV4Table_dataRowShowMore {
  width: 100%;
  height: 52px;
  float: left;
  line-height: 52px;
  cursor: pointer;
  text-align: center;
  color: #ccf2ff;
  margin-bottom: 4px;
}
.paramHistoryV4Table_colTimeItem {
  width: 10%;
  height: 100%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.paramHistoryV4Table_colColorItem {
  width: 20px;
  height: 24px;
  margin-right: 8px;
}
.paramHistoryV4Table_colDataItem {
  width: 7.5%;
  height: 100%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.paramHistoryDayLine {
  width: 100%;
  height: 2px;
  background-size: 100% 100%;
  background-image: url('~@/assets/v3/dayLine.png');
}
.titleFont {
  font-size: 15px;
  color: #ccf2ff;
}
.otherTitleFont {
  font-size: 15px;
  color: #f5f5cb;
}
.paramFont {
  font-size: 12px;
}

</style>
